﻿@using UCosmic.Www.Mvc.Areas.Identity.Models.Self
@model PersonForm
@{
    ViewBag.Title = "My UCosmic Profile";
    Layout = MVC.Shared.Views.layout;
}
@section Scripts {

    <script src="@Url.Content(Links.scripts.jquery_simplemodal_1_4_1_js)" type="text/javascript"></script>

    <script type="text/javascript" src="@Url.Content(@Links.scripts.identity.person_form_js)"></script>

}
@section Styles
{
    <style type="text/css">
        .ucosmic .field > .label {
            width: 130px;
            float: left;
        }
        .ucosmic .field > .label label {
            padding-top: 5px;
        }
        .ucosmic .field > .input {
            width: 280px;
            float: right;
        }
        
        .ucosmic #email_displayer, .ucosmic #affiliation_displayer {
            font-size: 1.1em;
        }
        .ucosmic #email_displayer .email-address {
            margin: 0 0 1.5em;
        }
        .ucosmic #email_displayer .email-address .email-value, .ucosmic #email_displayer .email-address .email-primary {
            display: inline-block;
            margin-right: 0.4em;
            font-weight: bold;
        }
        .ucosmic #email_displayer .email-address .email-confirmed {
            display: inline-block;
            margin-right: 0.4em;
            font-weight: bold;
            color: #090;
        }
        .ucosmic #email_displayer .email-address .email-unconfirmed {
            display: inline-block;
            margin-right: 0.4em;
            font-weight: bold;
            color: #c00;
        }
        .ucosmic .email-actions a, .ucosmic #email-actions span a,.ucosmic  #email-actions a, .ucosmic .affiliation-actions a, .ucosmic .email-respel {
            display: inline-block;
            padding: 0 5px;
            background: #ddd;
            border: solid 1px #ccc;
            margin: 3px 0.5em 0 0;
        }
        .ucosmic a.not-implemented:link, .ucosmic a.not-implemented:visited {
            color: #333;
        }
        .ucosmic #affiliation_displayer .affiliation-name {
            display: inline-block;
            margin-right: 0.4em;
            font-weight: bold;
        }
        .ucosmic #affiliation_displayer .affiliation-unacknowledged {
            display: inline-block;
            margin-right: 0.4em;
            font-weight: bold;
            color: #c00;
        }
    </style>
}
<div class="wrap-960 split-form">
    <div class="left">
        @using (Html.BeginForm())
        {
            <fieldset>
                <legend>My Name</legend>
                <p>
                    Use the form below to update your name.
                </p>
                @Html.EditorForModel()
            </fieldset>
        }
        <div style="height: 200px;">
        </div>
    </div>
    <div class="right">
        <fieldset>
            <legend>My Email Address(es)</legend>
            <p>
                Your primary and alternate / alias email addresses are listed below. <b style="color: #c00;">
                    Note: Only the blue feature links below have been implemented.</b>
            </p>
            <div id="email_displayer">
                @foreach (var email in Model.Emails)
                {
                    @Html.DisplayFor(m => email)
                }
                <div>
                    <a href="#" class="email-add-new not-implemented">Add an alternate or alias email address</a>
                </div>
                <div>
                    @Html.ActionLink("Change Password", MVC.Identity.Password.ChangePassword())
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>My Affiliation(s)</legend>
            <p>
                You are affiliated with the following establishments.
            </p>
            <div id="affiliation_displayer">
                @foreach (var affiliation in Model.Affiliations)
                {
                    @Html.DisplayFor(m => affiliation)
                }
            </div>
        </fieldset>
    </div>
</div>
